<template>
	<div class="darkBg">
		<div class="topInfo">
			<div class="container">
				<div class="personInfo">
					<div class="ava">
						<button class="avatar-wrapper" @click="toLogin" style="padding: 0; margin: 0;" v-if="!userInfo._id">
							<image class="avatar" src="https://www.baixuemianshi.com/zhuanti/images/ava.png"
								mode="widthFix"></image>
						</button>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							style="padding: 0; margin: 0;" v-else>
							<image v-if="userInfo.avatarUrl" class="avatar" :src="userInfo.avatarUrl" mode="widthFix"></image>
							<image v-else class="avatar" src="https://www.baixuemianshi.com/zhuanti/images/ava.png" mode="widthFix"></image>
						</button>
					</div>
					<div class="userDetail">
						<div class="nicknameBox" v-if="userInfo._id">
							<input type="nickname" v-model="userInfo.nickname" @blur="blurname" placeholder="请输入昵称" />
						</div>
						<div class="phoneBox">
							<u-button v-if="!userInfo.phone" type="primary" size="mini" @click="toLogin">立即登录</u-button>
							<p>{{ userInfo.phone }}</p>
						</div>
					</div>
				</div>
				<div class="top">
					<div class="hello">
						<h3>雪恒教育丨白雪面试，欢迎您！</h3>
						<p>终身成长，永不止步</p>
						<div class="openid">{{openid}}</div>
					</div>
					<div class="contactBox">
						<div class="icon">
							<u-button shape="circle" openType="contact">
								<u-icon name="server-man" color="#d9232f" size="28"></u-icon>
							</u-button>
						</div>
						<div class="bg1"></div>
						<div class="bg2"></div>
						<div class="bg3"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="container">

			<div class="contact">
				<ul>
					<li>
						<button class="flex_btn" openType="contact">
							<u-icon name="kefu-ermai" size="36" color="#d9232f"></u-icon>
							<h4>在线咨询</h4>
						</button>
						
					</li>
					<li>
						<button class="flex_btn" @click="showEwm = true">
							<u-icon name="chat" size="36" color="#d9232f"></u-icon>
							<h4>1v1私教</h4>
						</button>
					</li>
					<li>
						<button class="flex_btn" @click="changePath('./map')">
							<u-icon name="map" size="36" color="#d9232f"></u-icon>
							<h4>查找门店</h4>
						</button>
					</li>
					<li>
						<button class="flex_btn" @click="contactus()">
							<u-icon name="phone" size="36" color="#d9232f"></u-icon>
							<h4>电话咨询</h4>
						</button>
					</li>
					<li>
						<button class="flex_btn" @click="toWebview('https://mp.weixin.qq.com/s?__biz=Mzk0NTUyNjc1Ng==&mid=2247483653&idx=1&sn=b57143e0872bce4cf1cf266cd858e0d9&chksm=c315438ef462ca98bfec55cb0cdd27badf2d79e8de81fc950f4771daa56262caa2cd53d1973d#rd')">
							<u-icon name="integral" size="36" color="#d9232f"></u-icon>
							<h4>加盟合作</h4>
						</button>
					</li>
					<li>
						<button class="flex_btn" open-type="share">
							<u-icon name="share" size="36" color="#d9232f"></u-icon>
							<h4>分享快乐</h4>
						</button>
					</li>
					<li v-if="tkzInfo">
						<button class="flex_btn" @click="toWebview('https://www.baixuemianshi.com/zhuanti/tingkezheng/tkz.html?phone=' + userphone)">
							<u-icon name="account" size="36" color="#d9232f"></u-icon>
							<h4>我的听课证</h4>
						</button>
					</li>
				</ul>
			</div>
			
			<u-divider text="分割线" :dot="true"></u-divider>

			
			<div class="logo">
				<image src="https://www.baixuemianshi.com/zhuanti/images/logo_dark.png" mode="widthFix"></image>
			</div>
			
			<u-popup :show="showEwm" @close="showEwm = false" mode="center" :safeAreaInsetBottom="false">
				<div class="ewmBox">
					<image src="https://www.baixuemianshi.com/zhuanti/images/lynn.jpg" mode="widthFix" show-menu-by-longpress="true"></image>
					<h3>雪恒教育-白雪面试</h3>
				</div>
			</u-popup>

			<div class="popup" v-if="showPrivacy">
				<div class="popcontent">
					<view class="privacyTit">用户隐私保护提示</view>
					<div class="poptext">感谢您的使用，在使用本小程序前，应当阅读并同意<text
							@click="handleOpenPrivacyContract">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
					</div>
					<div class="btns">
						<div class="btn"><u-button shape="circle" @tap="showPrivacy = false">不同意并退出</u-button></div>
						<div class="btn"><u-button type="error" shape="circle" id="agree-btn"
								open-type="agreePrivacyAuthorization"
								@click="handleAgreePrivacyAuthorization">同意并继续</u-button></div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>

	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				home: {},
				name: "",
				ewm: "",
				openid: "",
				myopenid: "on-nB662C8l7Bksxx7OBp5N_Dclw",
				hidegg: false,
				hidegg2: false,
				avatarUrl: "",
				showPrivacy: false,
				userInfo: {
					_id: "",
					phone: "",
					nickname: "",
					avatarUrl: ""
				},
				showEwm: false,
				
				tkzInfo:false
			};

		},
		onLoad(options) {
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: res => {
						console.log(
							res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							this.showPrivacy = true
						} else {
							
						}
					},
					fail: () => {},
					complete: () => {}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: `雪恒教育丨白雪面试`, //分享标题
					path: '/pages/index/index', //分享页面路径
					imageUrl: '', //分享图标
					desc: '', //自定义分享描述 
				}
			} else {
				return {
					title: `雪恒教育丨白雪面试`, //分享标题
					path: '/pages/index/index', //分享页面路径
					imageUrl: '', //分享图标
					desc: '', //自定义分享描述 
				}
			}
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		mounted() {
			this.getTkzInfo()
		},
		watch: {
			userphone(val) {
				if (this.userphone) {
					this.getopenid()
				}
			}
		},

		created() {
			let that = this;
			that.getopenid()

		},
		methods: {
			...mapActions(['LogSetPhone', 'LogSetName']),
			onChooseAvatar(e) {
				let that = this
				if(!that.userInfo._id){
					uni.showToast({
						title:"请先登录！",
						icon: "error"
					})
					return
				}
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl)
				uni.uploadFile({
					url: "https://www.baixuemianshi.com/zhuanti/upload_img/xcx2.php",
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						let status = JSON.parse(res.data)
						if(status.status == 'success'){
							let link = 'https://www.baixuemianshi.com/zhuanti/upload_img/upload/' + status.data
							that.uploadAva(link)
						}else{
							uni.showToast({
								icon:"error",
								title:"上传失败"
							})
						}
						
					}
				})
			},
			uploadAva(link) {
				let that = this
				db.collection('all_user').doc(that.userInfo._id).update({
					data: {
						avatarUrl: link
					},
					success: res => {
						that.getUserDetail()
					}
				})
			},
			blurname(e) {
				let that = this
				db.collection('all_user').doc(that.userInfo._id).update({
					data: {
						nickname: e.detail.value
					},
					success: res => {
						that.getUserDetail()
					}
				})
			},
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						wx.setStorageSync("useropenid", res.result.openid)
						that.openid = res.result.openid
						that.getUserDetail()
					}
				})
			},
			getUserDetail() {
				let that = this
				db.collection('all_user').where({
					_openid: that.openid
				}).get({
					success: res => {
						console.log(res)
						if (res.data.length > 0) {
							that.userInfo._id = res.data[0]._id
							that.userInfo.phone = res.data[0].phone
							that.userInfo.nickname = res.data[0].nickname
							that.userInfo.avatarUrl = res.data[0].avatarUrl
							that.LogSetPhone(that.userInfo.phone)
						}
					}
				})
			},
			contactus() {
				wx.makePhoneCall({
					phoneNumber: '18646042617'
				});
			},
			changePath(path) {
				let that = this;
				uni.navigateTo({
					url: path
				});
			},
			toLogin() {
				let path = './login??navTlt=' + '个人中心'
				this.changePath(path)
			},
			toWebview(link){
				console.log(link)
				uni.navigateTo({
					url: '../webview/index?href=' + encodeURIComponent(link)
				});
			},
			async getTkzInfo(){
				let that = this
				let count = await db.collection('24gk_tkzinfo').where({
					phone:that.userphone
				}).count()
				console.log(count.total)
				if(count.total>0){
					that.tkzInfo = true
				}
			}

		}
	};
</script>

<style>
	@import url(./index.css);
</style>